import { PLUGIN_COLOR } from './options.js'
import Plugin from './plugin.js'
export default class ColorPlugin extends Plugin {
    constructor(name, editor) {
        super(name, editor)
        this._config = PLUGIN_COLOR
        this._color = '#000000'
        this._init()
    }

    getDom() {
        return this._plugin
    }

    _init() {
        this._createForm()
    }

    _createPopover() {
        const popover = document.createElement('div')
        popover.classList.add('plugin-popover', 'plugin-popover-color')
        const defaultColors = ['#181818', '#282828', '#383838', '#585858', '#b8b8b8', '#d8d8d8', '#e8e8e8', '#f8f8f8']
        defaultColors.push(...['#ff0000', '#c65911', '#2f75b5', '#00bb5e', '#86c1b9', '#7cafc2', '#ba8baf', '#a16946'])
        popover.innerHTML = `<div>
            <ul class="plugin-default-color clear-fix"></ul>
            <div class="button-list">
                <input type="color" value="#000000">
                <input type="text" value="#000000" maxLength="7">
                <input type="button" value="确定">
            </div>
        </div>`
        defaultColors.forEach(color => {
            const colorBlock = document.createElement('li')
            colorBlock.style.backgroundColor = color
            colorBlock.title = color.toUpperCase()
            popover.querySelector('.plugin-default-color').appendChild(colorBlock)
        })
        popover.querySelector('.plugin-default-color').addEventListener('mousedown', e => {
            const { target } = e
            if (target.tagName.toUpperCase() === 'LI') {
                e.preventDefault()
                popover.querySelector('input[type=color]').value =
                    popover.querySelector('input[type=text]').value = this._color = target.title
                this._execCommand()
            }
        })
        popover.querySelector('input[type=button]').addEventListener('mousedown', e => {
            this._color = popover.querySelector('input[type=text]').value
            this._execCommand()
        })
        return popover
    }

    _getPopover() {
        if (!this._popover) {
            this._popover = this._createPopover()
            this._$editor._editor.appendChild(this._popover)
        }
        return this._popover
    }

    _createForm() {
        this._plugin = document.createElement('li')
        this._plugin.classList.add('plugin-trigger')
        this._plugin.innerHTML = this._config.content
        this._plugin.title = this._config.name
        this._plugin.addEventListener('mousedown', (e) => {
            e.preventDefault()
            this._plugin.classList.toggle('plugin-active')
            const bound = this._plugin.getBoundingClientRect()
            const top = ~~('top' in bound ? bound.top : bound.y) + 25
            const left = ~~('left' in bound ? bound.left : bound.x) - 1
            const popover = this._getPopover()
            popover.style.cssText += `top:${top}px;left:${left}px`
            popover.classList.toggle('plugin-popover-active')
        })
    }

    _execCommand() {
        this._command.setColor(this._color)
        this._popover.classList.toggle('plugin-popover-active')
    }
}